<template>
	<view>
		
		<view style="height:50rpx;"></view>
		<view class="vote_title">
			<image style="width:100%;" mode="widthFix" src="https://resourse.cnlhjt.com/upload/20230113/4794b83ccc19b4ef8bdb144eceb4dbd5.png"></image>
		</view>
		<view style="padding:20rpx 40rpx;position: relative;top:-150rpx;">
			<u-empty :show="showEmpty" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
			</u-empty>
			<view class="list_con" v-for="(item,index) in list" :key="index" @click="todetail(item)">
				<rich-text :nodes="item.description"></rich-text>
			</view>
		</view>
		<u-popup :show="showvote" mode="center" round="15" bgColor="transparent">
			<view class="vote_tan">
				<view class="title">先登录 再投票</view>
				<view class="tan_input">
					<text>手机号：</text>
					<input style="width:75%;" type="text" v-model="tel">
				</view>
				<view class="tan_input">
					<text>验证码：</text>
					<input type="text" v-model="value">
					<text v-if="islogin" class="btn_code" @click="tologincode">获取验证码</text>
					<text v-else class="btn_code">{{second}}s获取</text>
				</view>
				
				<view class="sure_btn" @click="sure">确认</view>
			</view>
		</u-popup>
		<u-popup :show="showvote2" mode="center" round="15" bgColor="transparent" @close="showvote2=false">
			<view class="vote_tan u-rela" style="padding:20rpx 10rpx;width:90%;margin:0 auto;background-image: linear-gradient(to bottom,#ffefe4,#f8cab3);">
				<view style="margin:30rpx 0 50rpx;text-align: center;font-size: 35rpx;font-weight: bold;color:#333;">
					<image mode="widthFix" style="width:70%;" src="https://resourse.cnlhjt.com/upload/20230113/2755facccbce5459f66cd4835c95e731.png"></image>
				</view>
				<view style="text-align: center;">
					<view class="dis_inl_blo overflow" style="width:46%;margin:0 10rpx 10rpx;border-radius: 15rpx;" v-for="(item,index) in child" :key="index" @click="todetail2(item)">
						<rich-text :nodes="item.description"></rich-text>
					</view>
				</view>
				<view class="u-abso" style="right:20rpx;top:20rpx;" @click="showvote2=false">
					<u-icon size="28" name="close" color="#ffb07d"></u-icon>
				</view>
			</view>
			
		</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		send
	} from '@/service/smsService.js';
	import {
		codeLogin
	} from '@/service/loginService.js';
	import cookie from '@/util/store/cookie.js';
	import {
		getVoteStatus
	} from "@/service/questionService.js";
	export default {
		data () {
			return {
				showvote:false,
				showEmpty:false,
				list:[],
				second:60,
				error:false,
				islogin:true,
				
				tel:'',
				RequestId:'',
				value:'',
				
				showvote2:false,
				child:[]
			}
		},
		mounted() {
			getVoteStatus().then(this.getVoteStatus);
			if(cookie.get('token')){
				this.showvote=false;
			}else{
				this.showvote=true;
			}
			
			
		},
		methods:{
			back(){
				uni.navigateBack();
			},
			getVoteStatus(e){
				if(e.code==200){
					this.list=e.result;
					this.showEmpty=false;
				}else{
					this.list=[];
					this.showEmpty=true;
				}
			},
			todetail(item){
				if(item.child==false){
					this.$u.route({
						url: '/pages/vote/index',
						params: {
							id:item.id,
							span:item.span,
							child:false
						}
					});
					this.showvote2=false;
				}else{
					
					this.child=item.child;
					this.showvote2=true;
				}
				
			},
			todetail2(item){
				this.$u.route({
					url: '/pages/vote/index',
					params: {
						id:item.id,
						span:item.span,
						child:true
					}
				});
				this.showvote2=false;
			},
			tologincode(){
				this.islogin=false;
				var interval = setInterval(() => {
					if (this.second > 0) {
						// this.islogin=false
						this.second--;
						
					} else {
						this.islogin=true;
						clearInterval(interval);
					}
				}, 1000);
				send({
					mobile: this.tel,
					type: 'login'
				}).then(res => {
					// console.log(res);
					if (res.code == 200) {
						this.RequestId=res.result.RequestId;
						
					} else {
						this.$refs.uToast.show({
							type: 'error',
							message: res.msg,
							complete() {
								
							}
						});
						this.btncon='获取验证码';
					}
				});
			},
			sure(){
				var that=this;
				codeLogin({
					phone: this.tel,
					code: this.value,
					requestId: this.RequestId
				}).then(res => {
					if (res.code == 200) {
						
						this.$refs.uToast.show({
							message: res.msg,
							type: 'success',
							url: ''
						});
						cookie.set('token', res.result.token);
						cookie.set('uid', res.result.id);
						setTimeout(function(){
							that.showvote=false;
						},1500)
						
					} else {
						this.error = true;
						this.value = '';
						this.$refs.uToast.show({
							message: res.msg,
							type: 'error',
							url: ''
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-image: url('https://resourse.cnlhjt.com/upload/20230110/5cfa2eb011353ecc79cc0f8597492065.png');
		background-size: 100% 100%;
		background-position: center center;
	}
	.head_main{
		position: fixed;
		top:0;
		left:0;
		width:100%;
		z-index:999;
	}
	.list_con{
		margin-bottom:20rpx;
		border-radius: 20rpx;
		// border:5rpx solid #ffb07d;
	}
	.vote_tan{
		padding:20rpx 40rpx 40rpx;
		width:550rpx;
		background-color: #fff;
		border-radius: 15rpx;
		.title{
			text-align: center;
			padding:20rpx 0 50rpx;
			font-size: 35rpx;
			color:#333;
			font-weight: bold;
		}
		.tan_input{
			margin-bottom:50rpx;
			input{
				display: inline-block;
				width:45%;
				border-bottom: 1rpx solid #ddd;
				vertical-align: middle;
			}
			text{
				vertical-align: middle;
			}
			.btn_code{
				font-size: 25rpx;
				color:#fff;
				margin-left:15rpx;
				padding:5rpx 20rpx;
				background-color: #d0000c;
				border-radius: 10rpx;
			}
		}
		.sure_btn{
			width:100%;
			height:70rpx;
			line-height: 70rpx;
			color:#fff;
			text-align: center;
			border-radius: 35rpx;
			background-image: linear-gradient(to right,#f64337,#d0000c);
		}
	}
</style>